<template>
  <div class="item">
      <span class="ordinal">{{ordinal}}</span>
      <span class="name">{{item.name}}</span>
      <span class="price">{{item.price}}</span>
      <span class="amount">
          <!-- 通过 attribute 为子组件传递数据 -->
          <item-amount :amount="item.amount"></item-amount>
      </span>
      <span class="sub-total">{{item.price * item.amount}}</span>
      <span class="operation">
          <a @click.stop="remove">删除</a>
      </span>
  </div>
</template>

<script>
// 导入自定义组件
import ItemAmount from '@/components/ItemAmount.vue';

export default {
    name: 'CartItem',
    // 通过 props 接受由父组件传递的数据
    props: [ 'item' , 'ordinal'],
    methods: {
        remove(){
            // 通过由父组件传递的 item 来获得被删除项目的id
            // let id = this.item.id ;
            let { id } = this.item; // ES6提供的新语法(结构赋值)
            // 通过事件总线触发自定义事件并传递参数
            this.$eventBus.emit( this.$removeItem , id );
        }
    },
    components: {
        'item-amount': ItemAmount
    }
}
</script>

<style scoped>
.item {
    display: flex ;
    margin: 10px ;
    border: 1px solid blue;
    line-height: 2rem;
}

.item>span {
    text-align: center;
}

.ordinal { flex-basis: 5%; }
.name { flex-basis: 30%; }
.price { flex-basis: 10%; }
.amount { flex-basis: 25%; }
.sub-total { flex-basis: 15%; }
.operation { flex-basis: 15%; }
.operation>a { 
    cursor: pointer; 
    color: blue; 
    user-select: none;
}
</style>